/**
 * 巡检管理
 * **/

/**
 * 巡检计划 区域管理
 *
 * **/
import React, {Component} from 'react';
import {connect} from 'dva';
import Container from '../../../components/Container'
import Filtrate from '../../../components/Filtrate'
import MyTable from '../../../components/MyTable'
import config from '../../../config'
import MyIcon from '../../../components/MyIcon'
import MyModel from '../../../components/MyModel'
import {Modal, Row, Col, Input, Form} from 'antd';
import '../processManage.less'


class RoundCheck extends Component {
  state = {

  };

  onSelectChange(selectedRowKeys) {
    this.setState({selectedRowKeys});
  }

  modalCancel() {
    this.props.dispatch({type: 'planManage/saveInfo', payload: {isVisible: false}})
  }

  modalSave(params) {
    console.log(params);
  }

  addHandle() {
    this.props.dispatch({type: 'planManage/saveInfo', payload: {isVisible: true}})
  }

  deleteHandle() {
    console.log('删除')
  }
  render() {
    let {selectedRowKeys} = this.state;
    let dataSource = [
      {
        key: '1'
      },
      {
        key: '2'
      },
      {
        key: '3'
      },
      {
        key: '4'
      },
      {
        key: '5'
      },
      {
        key: '6'
      },
      {
        key: '7'
      },
      {
        key: '8'
      },
      {
        key: '9'
      },
      {
        key: '10'
      },
      {
        key: '11'
      },
      {
        key: '12'
      },
      {
        key: '13'
      },
      {
        key: '14'
      },
      {
        key: '15'
      },
      {
        key: '16'
      },
    ];
    let rowSelection = {
      selectedRowKeys,
      onChange: this.onSelectChange.bind(this),
    };
    let columns = [
      {
        dataIndex: 'key',
        key: 'key',
        title: '序号',
        width: 150
      },
      {
        dataIndex: '1',
        key: '1',
        title: '观察项名称',
        width: 150
      },
      {
        dataIndex: '2',
        key: '2',
        title: '选项',
        width: 150
      },
    ];
    let items = [
      {
        type: 'select',
        label: '区域名称:',
        placeholder: '请输入 ..',
        paramName: 'deviceType',
        options: [{text: '全部', value: '1'}]
      }
    ];
    let itemsModal= [
        {
          title: '',
          sub: [
            {
              type: 'input',
              label: `巡检员`,
              paramName: 'areaName',
              initialValue: '',
              span: 12,
              width: 210,
              rules: [],
              // addonAfter: '后缀'
            },
            {
              type: 'input',
              label: `任务数`,
              paramName: 'areaCode',
              initialValue: '',
              span: 11,
              offset: 1,
              width: 210,
              rules: [],
              // addonAfter: '后缀'
            },
            {
              type: 'select',
              label: `巡检路线`,
              paramName: 'tagType',
              initialValue: '',
              span: 12,
              width: 210,
              option: [
                {text: '无标签', value: '无标签'},
                {text: '二维码', value: '二维码'},
                {text: 'NFC', value: 'NCF'},
                ],
              rules: [],
              // addonAfter: '后缀'
            }
            ]
        }
        ];
    let height = document.body.clientHeight;
    return (
      <div>
        <Filtrate items={items}/>
        <Container
          addBtnShow
          addBtn={this.addHandle.bind(this)}
          deleteBtnShow
          deleteBtn={this.deleteHandle.bind(this)}
        >
          <MyTable
            columns={columns}
            dataSource={dataSource}
            scroll={{y: height - 317}}
            rowSelection={rowSelection}
            pagination={{
              size: config.size,
              showQuickJumper: true,

            }}
          />
        </Container>
        <MyModel
          title='新增'
          visible={this.props.visible}
          width={590}
          onCancel={this.modalCancel.bind(this)}
          onSave={this.modalSave.bind(this)}
          items={itemsModal}
          editAble={false}
          formItemLayout={{
            labelCol: {span: 24},
            wrapperCol: {span: 24}
          }}
        />
      </div>
    )
  }
}

function mapStateToProps(state) {
  return {
    visible: state.planManage.isVisible,
  }
}

export default connect(mapStateToProps)(RoundCheck)


